<template>
    <view class="page__bd">
        <view class="hb-search fixed" :style="[{top:CustomBar + 'px'}]">
            <view class="hb-search__form">
                <text class="hb-icon_search"></text>
                <input :adjust-position="false" type="text" placeholder="搜索图标" confirm-type="search"  @input="searchIcon"/>
            </view>
            <view class="action">搜索</view>
        </view>
        <view class="hb-list grid col-3 margin-top-lg">
            <view class="hb-list__item" v-for="(item,index) in hbIcon" :key="index" v-if="item.isShow">
                <text class="lg text-gray" :class="'hb-icon_' + item.name"></text>
                <text>.hb-icon_{{item.name}}</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                CustomBar: this.CustomBar,
                hbIcon: [{
                    name: 'comments',
                    isShow: true,
                }, {
                    name: 'creditcard',
                    isShow: true,
                }, {
                    name: 'tradingvolume',
                    isShow: true,
                }, {
                    name: 'share',
                    isShow: true,
                }, {
                    name: 'lights',
                    isShow: true,
                }, {
                    name: 'add-cart',
                    isShow: true,
                }, {
                    name: 'cart-empty',
                    isShow: true,
                }, {
                    name: 'cart-full',
                    isShow: true,
                }, {
                    name: 'upload',
                    isShow: true,
                }, {
                    name: 'download',
                    isShow: true,
                }, {
                    name: 'arrow-down',
                    isShow: true,
                }, {
                    name: 'arrow-up',
                    isShow: true,
                }, {
                    name: 'arrow-left',
                    isShow: true,
                }, {
                    name: 'arrow-right',
                    isShow: true,
                }, {
                    name: 'double-arrow-left',
                    isShow: true,
                }, {
                    name: 'double-arro-right',
                    isShow: true,
                }, {
                    name: 'image',
                    isShow: true,
                }, {
                    name: 'scanit',
                    isShow: true,
                }, {
                    name: 'map',
                    isShow: true,
                }, {
                    name: 'edit',
                    isShow: true,
                }, {
                    name: 'reduce',
                    isShow: true,
                }, {
                    name: 'password',
                    isShow: true,
                }, {
                    name: 'good',
                    isShow: true,
                }, {
                    name: 'bad',
                    isShow: true,
                }, {
                    name: 'discount',
                    isShow: true,
                }, {
                    name: 'clock',
                    isShow: true,
                }, {
                    name: 'coupons',
                    isShow: true,
                }, {
                    name: 'company',
                    isShow: true,
                }, {
                    name: 'calendar',
                    isShow: true,
                }, {
                    name: 'ashbin',
                    isShow: true,
                }, {
                    name: 'add',
                    isShow: true,
                }, {
                    name: 'prompt-fill',
                    isShow: true,
                }, {
                    name: 'data',
                    isShow: true,
                }, {
                    name: 'all',
                    isShow: true,
                }, {
                    name: 'roundclose',
                    isShow: true,
                }, {
                    name: 'check',
                    isShow: true,
                }, {
                    name: 'roundsuccessfill',
                    isShow: true,
                }, {
                    name: 'loading',
                    isShow: true,
                }, {
                    name: 'search',
                    isShow: true,
                }, {
                    name: 'view_off',
                    isShow: true,
                }, {
                    name: 'view',
                    isShow: true,
                }, {
                    name: 'cameraadd',
                    isShow: true,
                }, {
                    name: 'locationfill',
                    isShow: true,
                }, {
                    name: 'title',
                    isShow: true,
                }, {
                    name: 'qr_code',
                    isShow: true,
                }, {
                    name: 'close',
                    isShow: true,
                }, {
                    name: 'notice',
                    isShow: true,
                }, {
                    name: 'filter',
                    isShow: true,
                }, {
                    name: 'forum',
                    isShow: true,
                }]
            }
        },
        methods: {
            searchIcon(e) {
                let key = e.detail.value.toLowerCase();
                let list = this.hbIcon;
                for (let i = 0; i < list.length; i++) {
                    let a = key;
                    let b = list[i].name.toLowerCase();
                    if (b.search(a) != -1) {
                        list[i].isShow = true
                    } else {
                        list[i].isShow = false
                    }
                }
                this.hbIcon = list
            }
        }
    }
</script>

<style>
    page{
        padding-top:50px
    }
</style>
